<template>
    <el-select v-model="currentValue" :no-data-text="noDataText"
               :multiple="multiple" :disabled="disabled"
               @change="onChange" :placeholder="placeholder">
        <el-option
                v-for="item in selectData"
                :key="item.id"
                :label="item.authName"
                :value="item.id">
            <s v-if="item && !item.enabled">{{ item.authName }}</s>
            <span v-else>{{ item.authName }}</span>
        </el-option>
    </el-select>
</template>

<script>

    /**
     * 用户角色查询
     */
    export default {
        mounted() {
            this.loadData();
        },
        components: {},
        props: {
            method: null,
            value: {
                required: true
            },
            role: {
                type: String
            },
            noDataText: {
                type: String,
            },
            multiple: {
                type: Boolean,
                default: false
            },
            disabled: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                currentValue: this.value,
                selectData: []
            }
        },
        computed: {
            placeholder: function () {
                return this.noDataText || "请选择用户角色";
            }
        },
        methods: {
            /**
             * 数据加载
             */
            loadData() {
                if (this.method === 'POST') {
                    this.value = null;
                }
                if (!this.role) {
                    return;
                }
                if (this.role === 'ADMIN') {
                    this.selectData = [];
                    return;
                }

                this.$ajax.get('auth/role_view/dml', {
                    params: {
                        role: this.role
                    }
                }).then(res => {
                    if (res.code !== "ok") {
                        this.$message.error(res.msg);
                        return;
                    }
                    this.selectData = res.data;
                });

            },
            onChange: function (val) {
                this.$emit('input', val);
            },
            /**
             * 清空数据
             */
            clearData() {
                this.selectData = [];
            }
        },
        watch: {
            value: function (val, oldVal) {
                this.currentValue = val;
            },
            role(val) {
                this.loadData();
            }
        },
        filters: {},
        beforeDestroy() {

        }
    }
</script>

<style scoped>

</style>
